<template>
  <van-popup
      v-model:show="showPopup"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
  >
    <div class="music" v-if="musicData">
      <div class="music-main">
        <div class="cover soft">
          <van-image width="100%" height="100%" class="cover-pic" :style="{
            animationPlayState: musicIsPlay ? 'running': 'paused'
          }" :src="musicData.al.picUrl" round/>
        </div>
        <div class="music-info" v-if="showPopup">
          <v-text class="music-name" mode="marquee" :text="musicData.name"/>
          <v-text class="music-singer" :text="musicData.ar.map(item => item.name).join('/')"/>
        </div>
        <div class="lyric">
          <transition name="fade">
            <p :key="currentLyric">{{ currentLyric }}</p>
          </transition>
        </div>
        <div class="music-progress">
          <div class="time">
            <span>{{ currentTime }}</span> / <span>{{ maxTime }}</span>
          </div>
          <v-progress :progress="progress" @changeProgress="changeProgress"/>
        </div>

        <div class="music-control">
          <button v-touch class="button soft" @click="lastMusic">
            <van-icon class-prefix="music" name="last" class="micon"/>
          </button>
          <button v-touch class="button soft play" @click="playOrPause">
            <van-icon class-prefix="music" :name="musicIsPlay?'zanting':'bofang'" class="micon"/>
          </button>
          <button v-touch class="button soft" @click="nextMusic">
            <van-icon class-prefix="music" name="next" class="micon"/>
          </button>
        </div>
        <div class="details">
          <button class="button soft" v-touch @click="musicInfoPopup = true">
            <van-icon class-prefix="music" name="gequxinxi" class="micon"/>
          </button>
          <button class="button soft" v-touch @click="musicCommentPopup = true">
            <!--            <van-badge class="badge" color="#000" :content="commentCount > 999 ? '999':commentCount"/>-->
            <van-icon class-prefix="music" name="pinglun" class="micon"/>
          </button>
          <button class="button soft" v-touch @click="showBubble = !showBubble" :style="{color: showBubble?'red':'black'}">
            <van-icon class-prefix="music" name="xiaochou" class="micon"/>
          </button>
        </div>
      </div>
    </div>
  </van-popup>
  <div class="bubble-main">
    <BubbleComments v-if="musicCommentData"
                    @getData="getMoveComment"
                    :mid="musicId"
                    :show="showBubble" :comments="musicCommentData.comments" :hotComments="musicCommentData.hotComments" />
  </div>
  <div class="musicInfo-main">
    <MusicInfo provideName="show_music_info" :musicId="musicId" />
  </div>
  <div class="musicComment-main">
    <MusicComment :musicData="musicData" provideName="show_comment_list" :musicId="musicId"/>
  </div>
</template>

<style scoped>
.musicComment-main:deep(>.van-overlay){
  z-index: 2008 !important;
}
.musicComment-main:deep(>.van-popup){
  z-index: 2008 !important;
}
.bubble-main:deep(>.bubble){
  z-index: 2007 !important;
}
.musicInfo-main:deep(>.van-overlay){
  z-index: 2008 !important;
}
.musicInfo-main:deep(>.van-popup){
  z-index: 2008 !important;
}

</style>

<style lang="scss" scoped>

.fade-enter-active,.fade-leave-active{
  transition: all .2s;
}
.fade-enter,.fade-leave-to{
  transform: scaleY(0);
}
.fade-enter-to, .fade-leave{
  transform: scaleY(1);
}


@keyframes rotateZ {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.music {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .music-main {
    display: flex;
    width: auto;
    margin: 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .cover {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      padding: .5rem;

      .cover-pic {
        animation: rotateZ 10s infinite;
        animation-timing-function: linear;
      }
    }

    .lyric {
      position: relative;
      font-size: 16px;
      font-weight: bold;
      height: 2rem;
      width: 80vw;
      p{
        position: absolute;
        top: 0;
      }
    }

    .music-info {
      width: 80vw;
      margin: 2rem 0;

      .music-name {
        width: 80vw;
        font-size: 20px;
        font-weight: bold;
      }

      .music-singer {
        margin-top: .5rem;
        font-size: 14px;
        color: #999;
      }
    }

    .music-progress {
      width: 80vw;
      margin: 1rem 0;

      .time {
        font-weight: bold;
        font-size: 14px;
      }
    }

    .music-control {
      .button {
        position: relative;
        width: 4rem;
        height: 4rem;
        border: none;
        margin: 0 1rem;
        border-radius: 50%;


        &.play {
          background: #000;
          color: #fff;

          &.touch {
            background: #fff;
            color: #000;
          }
        }

        &.touch {
          background: #07c160c2;
          color: #fff;
        }

        .micon {
          font-size: 1.5rem;
        }
      }
    }

    .details {
      margin-top: 2rem;

      .button {
        position: relative;
        padding: .8rem 1rem;
        margin: 0 .5rem;
        border: none;


        .badge {
          position: absolute;
          z-index: 10;
          top: -0.5rem;
          right: -0.5rem;
        }

        &.touch {
          background: linear-gradient(145deg, #cacaca, #f0f0f0);
          box-shadow: 5px 5px 7px #cacaca, -5px -5px 7px #f6f6f6;
        }
      }
    }
  }
}
</style>

<script setup>
import AudioManger from "../../common/AudioManger";
import {useStore} from "vuex";
import {computed, defineProps, inject, provide, ref, toRefs, watch} from "vue";
import {analysisLyric, formatDuring} from "../../common/util";
import MusicInfo from "./MusicInfo.vue";
import MusicComment from "./MusicComment.vue";
import Loading from "../../common/Loading";
import BubbleComments from "../../components/list/BubbleCommentList.vue";

let store = useStore();
let musicInfoPopup = ref(false);
let musicCommentPopup = ref(false);
// 音乐数据
let musicData = computed(() => store.state.music.musicData);
// 音乐是否在播放
let musicIsPlay = computed(() => store.state.music.musicIsPlay);
// 音乐id
let musicId = computed(() => store.state.music.musicId);
// 当前音乐时间
let musicCurrentTime = computed(() => store.state.music.musicCurrentTime);
// 最大音乐时间
let musicMaxTime = computed(() => store.state.music.musicMaxTime);
// 音乐的歌词
let musicLyricData = computed(() => store.state.music.musicLyricData);
// 获取音乐评论数据
let musicCommentData = computed(() => store.state.music.musicCommentData);
//
let showBubble = ref(false);
// 当前播放的歌词
let currentLyric = ref('');
// 当前音乐进度
let progress = computed(() => parseInt(musicCurrentTime.value / musicMaxTime.value * 100));
// 当前音乐进度
let musicCommentsData = computed(() => parseInt(musicCurrentTime.value / musicMaxTime.value * 100));
// 当前音乐评论数量
let commentCount = ref(0);
// 发送这个对象给子节点
provide("music_comment_count", commentCount);

// 监听歌词
watch(musicCurrentTime, (time) => {
  let data = analysisLyric(time, musicLyricData.value?.lrc?.lyric);
  currentLyric.value = data?.lyric;
})


// 获取父级传入的数据
let propsDef = defineProps({
  provideName: {
    type: String
  }
});
let showPopup = inject(propsDef.provideName, ref(false));
// 传入参数
provide("show_music_info", musicInfoPopup);
provide("show_comment_list", musicCommentPopup);


let currentTime = computed(() => {
  let data = formatDuring(musicCurrentTime.value);
  return data.minutes + ':' + data.seconds;
});
let maxTime = computed(() => {
  let data = formatDuring(musicMaxTime.value);
  return data.minutes + ':' + data.seconds;
});

function playOrPause() {
  if (musicIsPlay.value) {
    store.dispatch("music/pause");
  } else {
    store.dispatch("music/play");
  }
}

function changeProgress(progress) {
  console.log(musicMaxTime.value * (progress / 100) / 1000)
  AudioManger.setCurrentTime(musicMaxTime.value * (progress / 100) / 1000);
  store.dispatch("music/play");
}

function getMoveComment(){
  store.dispatch("music/nextCommentData");
}

function nextMusic(){
  store.dispatch("music/next");
}
function lastMusic(){
  store.dispatch("music/last");
}
</script>

<style lang="scss" scoped>

</style>